<!--
 * @Description:直播间
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-6-25 14:10:00
 * @LastEditors: WangXi
 * @LastEditTime: 2023-06-25 14:09:26
-->
<template>
	<view class="broadcast-room-container">
		<view class="head">
			<c-status-bar />
		</view>
		<view class="main">
			<!-- 直播视频层 -->
			<view class="live-video-box" @click="liveVideoClick">
				直播中！！！
			</view>
			<!-- 按钮层 -->
			<view class="live-handle">
				<!-- 头部按钮 -->
				<view class="head-handle">
					<view class="user-box">
						<u-avatar :src="anotherInfo.avatar"></u-avatar>
					</view>
					<view class="more-close">
						<u-icon name="more-dot-fill"></u-icon>
						<u-icon name="close" @click="closeLives"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				anotherInfo: {

				}
			};
		},
		methods: {
			// 直播视频点击事件   - 可以取消显示操作按钮等等
			liveVideoClick() {},
			// 退出直播间
			closeLives() {
				this.publicJS.backOption()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.broadcast-room-container {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.cl-status__bar {
			flex: 0;
		}

		.main {
			flex: auto;
			position: relative;

			>.live-video-box {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 999;
				background-color: green;
			}

			>.live-handle {
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				position: absolute;
				background-color: transparent;
				z-index: 1000;

				.head-handle {
					padding: 60rpx 38rpx 0 44rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.user-box {
						background: rgba(255, 255, 255, 0.3183);
						width: 316rpx;
						height: 80rpx;
						border-radius: 40rpx 40rpx 40rpx 40rpx;
						padding-left: 6rpx;
						padding-right: 14rpx;
					}

					.more-close {
						font-size: 48rpx;
						color: #fff;

						.u-icon+.u-icon {
							margin-left: 38rpx;
						}
					}
				}
			}
		}
	}
</style>
